Node / reticulum_mirror / MeshChatX / files / meshchatx / src / frontend / components / tools / ToolsPageHeader.vue

Displaying Raw • Download

T8b949e<!-- SPDX-License-Identifier: 0BSD -->

Tff7b72<templateTff7b72>

Tff7b72<div

Te6edf3class=Ta5d6ff"flex flex-wrap items-center gap-x-2 gap-y-2 pl-1.5 pr-3 sm:pl-2 sm:pr-4 md:pl-4 md:pr-6 py-3 sm:py-4 border-b border-gray-200 dark:border-zinc-800 bg-slate-50 dark:bg-zinc-950 shrink-0 min-w-0"

Tff7b72>

Tff7b72<RouterLink

Te6edf3:to=Ta5d6ff"backTo"

Te6edf3class=Ta5d6ff"inline-flex items-center justify-center gap-0.5 sm:gap-1 rounded-lg pl-0 pr-1.5 sm:pr-2 py-2 min-h-9 min-w-9 sm:min-w-0 text-sm font-medium text-gray-600 dark:text-zinc-300 hover:bg-gray-100 dark:hover:bg-zinc-800/80 transition-colors shrink-0 order-first"

Te6edf3:aria-label=Ta5d6ff"$t('tools.back_to_tools')"

Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3icon-name=Ta5d6ff"chevron-left" Te6edf3class=Ta5d6ff"size-6 sm:size-5 shrink-0" Tff7b72/>

Tff7b72<span Te6edf3class=Ta5d6ff"hidden sm:inline truncate max-w-[8rem]"Tff7b72>Tff7b72{{ Te6edf3resolvedBackLabel Tff7b72}}Tff7b72</span>

Tff7b72</RouterLink>

Tff7b72<div Te6edf3class=Ta5d6ff"flex items-center gap-2 sm:gap-3 min-w-0 flex-1 basis-0"Tff7b72>

Tff7b72<div Te6edf3class=Ta5d6ff"p-2 rounded-lg shrink-0" Te6edf3:class=Ta5d6ff"iconWrapClass"Tff7b72>

Tff7b72<MaterialDesignIcon Te6edf3:icon-name=Ta5d6ff"icon" Te6edf3class=Ta5d6ff"size-5 sm:size-6" Te6edf3:class=Ta5d6ff"iconClass" Tff7b72/>

Tff7b72</div>

Tff7b72<div Te6edf3class=Ta5d6ff"min-w-0"Tff7b72>

Tff7b72<p Te6edf3v-if=Ta5d6ff"eyebrow" Te6edf3class=Ta5d6ff"text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 truncate"Tff7b72>

Tff7b72{{ Te6edf3eyebrow Tff7b72}}

Tff7b72</p>

Tff7b72<h1 Te6edf3class=Ta5d6ff"text-lg sm:text-xl font-bold text-gray-900 dark:text-white truncate"Tff7b72>

Tff7b72{{ Te6edf3title Tff7b72}}

Tff7b72</h1>

Tff7b72<p

Te6edf3v-if=Ta5d6ff"description"

Te6edf3class=Ta5d6ff"text-xs sm:text-sm text-gray-500 dark:text-gray-400 line-clamp-2 sm:line-clamp-none"

Tff7b72>

Tff7b72{{ Te6edf3description Tff7b72}}

Tff7b72</p>

Tff7b72</div>

Tff7b72</div>

Tff7b72<div Te6edf3v-if=Ta5d6ff"$slots.actions" Te6edf3class=Ta5d6ff"flex items-center gap-2 shrink-0 ml-auto"Tff7b72>

Tff7b72<slot Te6edf3name=Ta5d6ff"actions" Tff7b72/>

Tff7b72</div>

Tff7b72</div>

Tff7b72</template>

Tff7b72<scriptTff7b72>

import MaterialDesignIcon from "../MaterialDesignIcon.vue";

const ACCENT = {

blue: {

wrap: "bg-blue-100 dark:bg-blue-900/30",

icon: "text-blue-600 dark:text-blue-400",

},

indigo: {

wrap: "bg-indigo-100 dark:bg-indigo-900/30",

icon: "text-indigo-600 dark:text-indigo-400",

},

teal: {

wrap: "bg-teal-100 dark:bg-teal-900/30",

icon: "text-teal-600 dark:text-teal-400",

},

purple: {

wrap: "bg-purple-100 dark:bg-purple-900/30",

icon: "text-purple-600 dark:text-purple-400",

},

green: {

wrap: "bg-green-100 dark:bg-green-900/30",

icon: "text-green-600 dark:text-green-400",

},

orange: {

wrap: "bg-orange-100 dark:bg-orange-900/30",

icon: "text-orange-600 dark:text-orange-400",

},

cyan: {

wrap: "bg-cyan-100 dark:bg-cyan-900/30",

icon: "text-cyan-600 dark:text-cyan-400",

},

rose: {

wrap: "bg-rose-100 dark:bg-rose-900/30",

icon: "text-rose-600 dark:text-rose-400",

},

violet: {

wrap: "bg-violet-100 dark:bg-violet-900/30",

icon: "text-violet-600 dark:text-violet-400",

},

amber: {

wrap: "bg-amber-100 dark:bg-amber-900/30",

icon: "text-amber-600 dark:text-amber-400",

},

sky: {

wrap: "bg-sky-100 dark:bg-sky-900/30",

icon: "text-sky-600 dark:text-sky-400",

},

zinc: {

wrap: "bg-zinc-100 dark:bg-zinc-800",

icon: "text-zinc-600 dark:text-zinc-400",

},

};

export default {

name: "ToolsPageHeader",

components: { MaterialDesignIcon },

props: {

icon: { type: String, required: true },

title: { type: String, required: true },

description: { type: String, default: "" },

eyebrow: { type: String, default: "" },

accent: {

type: String,

default: "blue",

validator: (v) => Object.prototype.hasOwnProperty.call(ACCENT, v),

},

backTo: { type: [String, Object], default: "/tools" },

backLabel: { type: String, default: "" },

},

computed: {

palette() {

return ACCENT[this.accent] || ACCENT.blue;

},

iconWrapClass() {

return this.palette.wrap;

},

iconClass() {

return this.palette.icon;

},

resolvedBackLabel() {

return this.backLabel || this.$t("app.tools");

},

},

};

Tff7b72</script>